<template>
	<view class='active_order'>
		<view class='addressInfo'>
			<view class="tihuoren dFlex jBetween_aCenter" v-if='addInfo.id'>
				<view class="thr">提货人：{{addInfo.receiver}} {{addInfo.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")}}</view>
				<view class="exchange dFlex jEnd_aCenter" @tap='selAdd'>
					<view>切换</view> 
					<view class="rightIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/right.png" mode="widthFix"></image>
					</view>  
				</view>
			</view>
			<view class="tihuoren dFlex jBetween_aCenter" v-else>
				<view class="thr">暂未设置</view>
				<view class="exchange dFlex jEnd_aCenter" @tap='selAdd'>
					<view>切换</view> 
					<view class="rightIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/right.png" mode="widthFix"></image>
					</view>  
				</view>
			</view>
			<view class="zitidian">
				<view class="ztd_name">自提点：{{leaderInfo.address_id?leaderInfo.store_name:'-'}}</view>
				<view class="ztd_info dFlex jStart_aStart">
					<view class="ztdImg imgPublic">
						<image v-if='leaderInfo.address_id' :src='leaderInfo.store_imgs' mode='widthFix'></image>
						<image v=else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="showName dFlex jBetween_aCenter"> 
							<text v-if='leaderInfo.address_id'>{{leaderInfo.nickname}} {{leaderInfo.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")}}</text>
							<text v-else>请选择自提点</text>
							<view class="exchange dFlex jEnd_aCenter" @click='selZiti'>
								<view>切换</view> 
								<view class="rightIcon imgPublic">
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/right.png" mode="widthFix"></image>
								</view>  
							</view>
						</view>
						<view class="dizhi">{{leaderInfo.address}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="tips">请按提示时间前往自提点取货,如有问题可联系团长为您解决</view> -->
		</view> 
		<view class='shops'>
			<!-- <view class="time">明天14:00可提货</view> -->
			<view class="product">
				<view class="shop dFlex jStart_aStart" v-for='(item,index) in shops' :key='index'>
					<view class="shopImg imgPublic dFlex jCenter_aCenter" >
						<image :src="item.goods_main_img" mode="widthFix"></image>
					</view>
					<view class="shopInfo">
						<view class="shopName">{{item.goods_title}}</view>
						<view class="config">
							<view class="tools dFlex jBetween_aEnd">
								<view class="showPrice" v-if='ptid'>￥<text>{{item.goods_pt_price?item.goods_pt_price:item.goods_price}}</text></view>
								<view class="showPrice" v-if='msid'>￥<text>{{item.ms_price?item.ms_price:item.goods_price}}</text></view>
								<view class="count">
									<u-number-box v-model="item.count" :min='1' :disabled='ptid && item.goods_stock > 0 || msid && item.ms_stock > 0 ? false:true' @change='changeCount($event,index)'></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="config">
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">商品总额</view>
				<view class="lineVal">￥{{price?price:'0.00'}}</view>
			</view>
			<!-- <view class="line dFlex jBetween_aCenter">
				<view class="lineTit">运费</view>
				<view class="lineVal">￥{{datas.ship_money?datas.ship_money:'0.00'}}</view>
			</view> -->
			<!-- <view class="line dFlex jBetween_aCenter">
				<view class="lineTit">优惠</view>
				<view class="lineVal" v-if='!coupon.length'>暂无可用优惠</view>
				<view class="lineVal" v-if='coupon.length && !selcp.length' @click='couponFlag = true'>暂未选择相关优惠</view>
				<view class="lineVal" v-if='coupon.length && selcp.length' @click='couponFlag = true'>￥{{cpCount?cpCount:'0.00'}}</view>
			</view> -->
		</view>
		<view :class="['bottomBtn',device == 'ios'?'ios_safe':'','dFlex','jBetween_aCenter']">
			<view></view>
			<view class="tj dFlex jEnd_aCenter">
				<view class="allCount">
					<view class="resultPrice">共{{num}}件, 合计:<text>￥{{price?price.toFixed(2):'0.00'}}</text></view>
					<view class="line2" v-if="coupon.length" @tap.stop='changeCouponFlag'>共优惠<text>￥{{cpCount}}</text></view>
				</view>
				<view class="payBtn"@tap='subOrder'>去结算</view>
			</view>
		</view>
		<!-- 优惠券选择弹窗 -->
		<view class="zz dFlex flexDirection jEnd_aCenter" v-if="couponFlag">
			<view class='coupon'>
				<view class="titles dFlex jCenter_aCenter">
					<view class="line"></view>
					<view class="tit">优惠券</view>
					<view class="line"></view>
				</view>
				<view class="tools dFlex jBetween_aCenter">
					<view class="count">可用优惠券({{coupon.length}})</view>
					<!-- <view class="explain">优惠券说明</view> -->
				</view>
				<view class="qList">
					<view class="cpOne" v-for="(item,index) in coupon" :key='index' @tap.stop='change_sekStatus(item)'>
						<view class="cpMain">
							<view class="cpBgImg imgPublic">
								<image v-if="!item.canUse" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/haveUse.png" mode="widthFix"></image>
								<image v-if="item.canUse" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/noUse.png" mode="widthFix"></image>
								<view class="statusIcon imgPublic" v-if="item.canUse">
									<image v-if="!item.selFlag" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
									<image v-if="item.selFlag" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel2.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="cpContent dFlex jBetween_aCenter">
								<view class="contentLeft">
									<view class="tag" v-if="item.type == '0'">无门槛券</view>
									<view class="tag" v-if="item.type == '1'">满减券</view>
									<view class="tag" v-if="item.type == '2'">活动券</view>
									<view class="tag" v-if="item.type == '3'">立减券</view>
									<view class="tag" v-if="item.type == '4'">折扣券</view>
									<view class="content dFlex jStart_aStart">
										<!-- <view class="shopImg imgPublic">
											<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png" mode="widthFix"></image>
										</view> -->
										<view class="cpDetail">
											<view class="toast" v-if="item.type == 3">仅限指定商品使用</view>
											<view class="cpName">{{item.title}}</view>
											<view class="time">{{item.start_time_text.substring(0,item.start_time_text.length-3)}}至{{item.end_time_text.substring(0,item.start_time_text.length-3)}}</view>
											<view class="expbtn dFlex jStart_aCenter" @tap.stop='changeRuleFlag(item)'>
												<text>详细信息</text>
												<view class="exBtn imgPublic">
													<image v-if="item.ruleFlag" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/open.png" mode="widthFix"></image>
													<image v-if="!item.ruleFlag" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/close.png" mode="widthFix"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="contentRight dFlex flexDirection jCenter_aCenter">
									<view class="cpCount" v-if="item.type != '4'">￥<text>{{item.sub_price}}</text></view>
									<view class="cpCount" v-if="item.type == '4'"><text>{{item.discount}}</text>折</view>
									<view class="condition" v-if="item.type != '3' && item.type != '0' && item.type != '4'">满{{item.min_price}}元可用</view>
									<!-- <view class="useBtn">立即使用</view> -->
								</view>
							</view>
						</view> 
						<view class="explain" v-if="item.ruleFlag">
							<view class="line">{{item.rule}}</view>
						</view>
					</view>
				</view>
				<view class="btns dFlex jCenter_aCenter" @tap.stop='couponFlag = false'>
					<view class="btn">可减{{cpCount}}元，去结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device:getApp().globalData.platform,
				ptid:'',
				msid:'',
				mobile:"",
				
				shops:[],
				leaderInfo:{
					phone:"",
				},
				count0:0,
				price:0,
				num:0,
				// 提货人地址
				addInfo:{},
				// 优惠券相关
				couponFlag:false,
				coupon:[],
				cpCount:0,
				selcp:[],
				
				wallet:0,
			};
		}, 
		onLoad(e) {
			this.ptid = e.ptid?e.ptid:'';
			this.msid = e.msid?e.msid:'';
			this.mobile = e.mobile?e.mobile:"";
			this.leaderInfo = e.leaderInfo ? JSON.parse(e.leaderInfo) : {phone:""};
			this.shops = JSON.parse(e.shops);
			// 拉取地址列表
			this.initList();
			// 拼团信息
			/* if(this.ptid){
				this.initPTData();
			} */
			// 钱包
			this.initwallet();
			// 优惠券列表
			this.initCoupon();
		},
		onShow(){
			if(this.leaderInfo){
				this.$forceUpdate();
			}
		},
		methods:{
			// 提交订单
			subOrder(){
				if(!this.addInfo.id){
					uni.showToast({
						title:"请选择提货人信息",
						icon:"none"
					})
					return;
				}
				if(!this.leaderInfo.address_id){
					uni.showToast({
						title:"请选择自提点",
						icon:"none"
					})
					return;
				}
				var url = this.ptid?'/api/Mall/createOrderByPintuan':'/api/Mall/createOrderByMiaosha';
				let shareId = '';
				if(this.ptid && uni.getStorageSync('shareInfo') && uni.getStorageSync('shareInfo').id == this.ptid || this.msid && uni.getStorageSync('shareInfo') && uni.getStorageSync('shareInfo').id == this.msid){
					shareId = uni.getStorageSync('shareInfo').shareId
				}
				var data = {
					goods_list:JSON.stringify(this.shops.map((shop)=>{return {
						goods_id:shop.goods_id,
						num:shop.count,
						goods_attr_id:shop.goods_attr_id,
					}})),
					address_id:this.leaderInfo.address_id,
					receive_address_id:this.addInfo.id?this.addInfo.id:0,
					service_user_id:this.leaderInfo.id,
					paytype:'wxpay',
					coupon:this.selcp.map((item)=>{return item.id}).join(','),
					tjr_id: shareId,
				};
				if(this.ptid){
					data.pt_id = this.ptid;
				}
				if(this.msid){
					data.ms_id = this.msid;
				}
				this.tool.getData(url,data).then(res=>{
					if(res){
						this.tool.getData('/api/mall/orderPay',{
							oid:res.id
						}).then(payInfo=>{
							uni.requestPayment({
								provider:'wxpay',
								timeStamp:payInfo.info.timeStamp,
								nonceStr:payInfo.info.nonceStr,
								package:payInfo.info.package,
								signType:payInfo.info.signType,
								paySign:payInfo.info.paySign,
								success: (pay) => {
									uni.showToast({
										title:'订单支付成功',
										icon:"success"
									})
									setTimeout(()=>{
										uni.redirectTo({
											url:'./orders'
										})
									},1650)
								},
								fail:(err)=>{
									console.log(err);
									uni.showToast({
										title:'取消支付',
										icon:"none"
									})
									setTimeout(()=>{
										uni.redirectTo({
											url:'./orders'
										})
									},1650)
								}
							})
							/* if(paytype == 'wxpay'){
								
							}else{
								uni.showToast({title:'订单支付成功',icon:"success"})
								setTimeout(()=>{uni.redirectTo({url:'./orders'})},1650)
							} */
						}).catch(err=>{
							console.log(err);
						})
					}
				}).catch(err=>{
					console.log(err);
				})
				/* uni.showActionSheet({
					itemList:['微信支付','余额支付'],
					success: (op) => {
						let paytype = op.tapIndex == 0?'wxpay':'balance';
						if(paytype == 'balance' && this.wallet < this.price){
							uni.showModal({
								title:'余额不足 是否充值',
								success:(op)=>{
									if(op.confirm){
										uni.navigateTo({
											url:'./recharge'
										})
									}
								},
							})
							return;
						}
						
					},
					fail:(err)=>{
						console.log(err);
					}
				}) */
			},
			// 优惠券列表
			initCoupon(){
				this.tool.getData('/api/mall/getUseCoupon',{
					source:'1',
					source_id:this.ptid,
				}).then(res=>{
					if(res && res.length){
						res.map((item,index)=>{
							item.selFlag = false;
							item.ruleFlag = false;
							item.canUse = false;
						})
						this.coupon = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 活动信息
			initPTData(){
				this.tool.getData('/api/pintuan/getPintuanInfoToc',{
					pt_id:this.ptid?this.ptid:'',
					tjr_mobile:this.mobile?this.mobile:"",
					lat:getApp().globalData.lat,
					lng:getApp().globalData.lng,
				},"",this).then(res=>{
					if(res){
						this.leaderInfo = res.leaderInfo;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 钱包余额
			initwallet(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.wallet = res.vip_rechage_balance;
						this.calcOrderNum();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 地址列表
			initList(){
				this.tool.getData('/api/user/getAddressList',{}).then(res=>{
					if(res && res.length){
						this.addInfo = res.find((add)=>{return add.is_default == "1"}) ? res.find((add)=>{return add.is_default == "1"}) : res[0]; 
					}
				}).catch(err=>{
					console.log(err);
				}) 
			},
			// 修改数量
			changeCount(e,idx){
				if(this.ptid){
					if(this.shops[idx].count>this.shops[idx].goods_stock){
						uni.showToast({
							title:'库存数不足',
							icon:'none'
						})
						return;
					}
				}
				if(this.msid){
					if(this.shops[idx].count>this.shops[idx].ms_stock){
						uni.showToast({
							title:'库存数不足',
							icon:'none'
						})
						return;
					}
				}
				this.calcOrderNum();
			},
			// 计算商品数量和显示价格
			calcOrderNum(){
				this.count0 = 0;
				this.price = 0;
				this.num = 0;
				this.shops.map((item,index)=>{
					this.count0 = this.count0 + parseInt(item.count);
					this.num = this.num + parseInt(item.count);
					if(this.ptid){
						this.price = this.price + item.count * (item.goods_pt_price?item.goods_pt_price:item.goods_price);
					}
					if(this.msid){
						this.price = this.price + item.count * (item.ms_price?item.ms_price:item.goods_price);
					}
				})
			},
			// 选择自提点
			selZiti(){
				uni.navigateTo({
					url:'./ziti?ptid='+this.ptid+'&leaderInfo='+JSON.stringify(this.leaderInfo),
				})
			},
			// 选择提货人
			selAdd(){
				uni.navigateTo({
					url:'./address',
				})
			},
		}
	} 
</script>

<style lang="scss">
	.active_order{
		.bottomBtn{
			width: 100%;
			background: white;
			position: fixed;
			bottom: 0;
			left:0;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			.tj{
				width: auto;
				.allCount{
					.line2{
						width:100%;
						text-align: right;
						font-size: 12px;
						text{
							color: #FC4424;
						}
					}
					.resultPrice{
						text{
							color: #FF6200;
							font-size: 20px;
							font-weight: bold;
						}
					}
				}
				.payBtn{
					width: max-content;
					padding: 8px 20px;
					color: white;
					border-radius: 50px;
					background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
					margin-left: 20rpx;
				}
			}
		}
		.config{
			width:100%;
			border-radius: 5px;
			padding: 10px;
			box-sizing: border-box;
			background: white;
			.line{
				width: 100%;
				font-size: 14px;
				padding:5px 0;
				.lineTit{
					color: #666666;
				}
				.showPrice{
					font-size: 18px;
					font-weight: bold;
					color: #EB0C0C;
				}
			}
			.line:last-child{
				margin:0;
			}
		}
		.shops{
			.product{
				width: 100%;
				.shop{
					width: 100%;
					margin-bottom: 10px;
					.shopInfo{
						width: calc(100% - 110px);
						.shopName{
							width: 100%;
							overflow:hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							font-size: 16px;
							font-weight: bold;
						}
						.config{
							width: 100%;
							margin-top:20px;
							.priceTag{
								width: 100%;
								font-size: 12px;
								margin-bottom: 6rpx;
								.miaosha{
									width: max-content;
									background: linear-gradient(180deg, #FF6200 0%, #FE3140 100%);
									color: white;
									border: 1px solid #FF6200;
								}
								.jiang{
									color: #FF6200;
									border: 1px solid #FF6200;
								}
								view{
									padding: 0 8px;
									line-height: 36rpx;
									border-radius: 8rpx;
									margin-right:4rpx;
								}
							}
							.tools{
								width: 100%;
								.showPrice{
									color: #FF6200;
									font-size: 12px;
									text{
										font-size: 20px;
										font-weight: bold;
									}
								}
							}
						}
					}
					.shopImg{
						width: 100px;
						height: 100px;
						border-radius: 6px;
						overflow: hidden;
						margin-right: 10px;
						image{
							width: 100%;
						}
					}
				}
				.shop:last-child{
					margin: 0;
				}
			}
			.time{
				padding-bottom: 10px;
				border-bottom: 1px solid #f8f8f8;
			}
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			background: white;
			border-radius: 5px;
			margin: 12px 0;
			
		}
		.addressInfo{
			.tips{
				width: 100%;
				padding: 5px 10px;
				box-sizing: border-box;
				background: #fff6e9;
				color: #e6a23c;
				font-size: 12px;
			}
			.zitidian{
				.ztd_info{
					.other{
						flex: 1;
						.dizhi{
							width: 100%;
							color: #909399;
							font-size:12px;
							margin-top: 5px;
						}
					}
					.ztdImg{
						width: 50px;
						height: 50px;
						border-radius: 4px;
						overflow: hidden;
						margin-right: 10px;
					}
					width: 100%;
				}
				.ztd_name{
					margin-bottom: 5px;
				}
				padding:10px;
				box-sizing: border-box;
			}
			.tihuoren{
				.thr{
					flex: 1;
					margin-right: 12px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				width: 100%;
				padding:0 10px 10px;
				box-sizing: border-box;
				border-bottom: 1px solid #f8f8f8;
			}
			width: 100%;
			background: white;
			border-radius: 5px;
			padding: 10px 0 0;
			box-sizing: border-box;
		}
		.exchange{
			width: auto;
			margin-left: 6px;
			font-size: 12px;
			.rightIcon{
				width: 20px;
				margin-left: 2px;
			}
		}
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}
	.zz{
		color: white;
		font-size:16px;
		.coupon{
			color: #333333;
			width: 100%;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background: white;
			max-height: 80%;
			position: relative;
			overflow: auto;
			padding-bottom: 80px;
			box-sizing: border-box;
			font-size:14px;
			.btns{
				width: 100%;
				padding: 20rpx 0;
				border-top: 1px solid #D8D8D8;
				position: fixed;
				left: 0;
				bottom: 0;
				background: white;
				.btn{
					width: 74.4%;
					text-align: center;
					color: white;
					border-radius: 50px;
					background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
					padding: 24rpx 0;
					font-size: 16px;
				}
			}
			.qList{
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				.cpOne{
					width: 100%;
					background: white;
					border-radius: 20rpx;
					box-sizing: border-box;
					overflow: hidden;
					margin-bottom: 20rpx;
					.cpMain{
						width: 100%;
						position: relative;
						.cpBgImg{
							width: 100%;
							position: relative;
							.statusIcon{
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background: white;
								position: absolute;
								top: 10rpx;
								right: 10rpx;
								image{
									width: 100%;
								}
							}
						}
						.cpContent{
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							.contentLeft{
								width: 69%;
								height: 100%;
								padding:12rpx 24rpx;
								box-sizing: border-box;
								.content{
									width: 100%;
									.cpDetail{
										flex: 1;
										min-width: calc(100% - 70px);
										.toast{
											color: #666666;
											font-size: 12px;
											margin-bottom: 4rpx;
										}
										.cpName{
											margin-bottom: 4rpx;
											width: 100%;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
											font-size: 15px;
											font-weight: bold;
										}
										.time{
											color: #666666;
											font-size: 12px;
											margin-bottom: 12rpx;
										}
										.expbtn{
											color: #999999;
											font-size: 12px;
											.exBtn{
												width: 24rpx;
												height: 24rpx;
												margin-left: 8rpx;
											}
										}
									}
									.shopImg{
										width: 128rpx;
										height: 128rpx;
										margin-right:12rpx;
										image{
											width: 100%;
											height: 100%;
											border-radius: 20rpx;
										}
									}
								}
								.tag{
									font-size: 10px;
									padding: 2px 18rpx;
									color: #FD5605;
									background: #FFF0E8;
									margin-bottom: 8rpx;
									width: max-content;
								}
							}
							.contentRight{
								width: 31%;
								height: 100%;
								padding: 24rpx;
								box-sizing: border-box;
								color: white;
								.useBtn{
									width: max-content;
									padding: 10rpx 16rpx;
									border-radius: 50px;
									background: white; 
									color: #FF5000;
									font-size: 12px;
								}
								.condition{
									font-size: 12px;
									margin-bottom: 10rpx;
								}
								.cpCount{
									font-size: 16px;
									font-weight: bolder;
									text{
										font-size: 34px;
									}
								}
							}
						}
					}
					.explain{
						width: 100%;
						padding: 24rpx;
						box-sizing: border-box;
						color: #999999;
						font-size: 12px;
						background: white;
						line-height: 38rpx;
					}
				}
			}
			.tools{
				color: #999999;
				font-size: 12px;
				margin-bottom: 30rpx;
				padding: 0 24rpx;
				width: 100%;
				box-sizing: border-box;
			}
			.titles{
				width: 100%;
				padding: 40rpx 0;
				font-size: 20px;
				font-weight: bold;
				.line{
					width: 160rpx;
					height: 0;
					border: 1px solid #C1C1C1;
					margin: 0 20rpx;
				}
			}
		}
		.closeBtn{
			width: max-content;
			padding: 8px 50px;
			margin: 10px auto;
			font-size: 12px;
			border-radius: 30px;
			color: white;
			border: 1px solid white;
		}
		.advImg{
			margin-bottom: 10px!important;
		}
		.opBtns{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: white;
			padding:0 0 25px;
			box-sizing: border-box;
			.toast{
				width: 100%;
				text-align:center;
				padding:12px 0;
				color:#666666;
			}
			.close{
				width: 94%;
				margin:6px auto 0;
				text-align:center;
				color:#666666;
				font-size:12px;
			}
			.btns{
				width: 100%;
				.opBtnOne{
					width: max-content;
					text-align: center;
					font-size: 12px;
					color: #333333;
					.btnImg{
						width: 45px;
						height: 45px;
						margin-bottom: 8px;
					}
				}
			}
		}
	}
	page{
		background: #f8f8f8;
	}
</style>
